<template>
    <div class="">
        <!--异地登录验证手机号码 -->
        <el-dialog
            title="异地登录"
            :visible.sync="verificationNumberDialogVisible"
            :modal-append-to-body="false"
            width="330px"
            center
            :close-on-click-modal="false"
            :append-to-body="true"
            @close="resetForm('phone')"
            :show-close="false"
        >
            <div class="verificationNumber">
                <h4 class="mima" style="margin-bottom: 0px">为了确认您的身份，需要验证手机号</h4>
                <p class="anquan" style="margin-bottom: 30px">验证码会发至您的手机号 {{ account_phonenumber }}</p>
                <el-form :model="phone" status-icon :rules="rules" ref="phone" @submit.native.prevent>
                    <el-form-item label="" prop="phone_yzm" v-if="isShow">
                        <div class="flex-hb" style="width: 270px">
                            <el-input
                                type="text"
                                placeholder="验证码"
                                v-model="phone.phone_yzm"
                                autocomplete="off"
                                style="width: 172px; height: 40px"
                                @keyup.enter.native="getPhoneCaptchas()"
                            ></el-input>
                            <div style="width: 80px; height: 30px; left: 8px" @click="captchaImages()">
                                <img style="height: 30px; margin-top: -1px; width: 81px" :src="captchaImg ? captchaImg : ''" alt="" />
                            </div>
                        </div>
                    </el-form-item>
                    <!-- 没有图片验证码获取手机验证码 -->
                    <el-form-item label="" prop="phone_sjyzm" v-if="isShow_1">
                        <div class="flex-hbvc" style="width: 270px">
                            <el-input style="width: 170px" type="text" placeholder="手机验证码" v-model="phone.phone_sjyzm" autocomplete="off" @keyup.enter.native="login_yzm_1()"></el-input>
                            <el-button class="yzmbutton" :disabled="disabled" @click="getCaptchas()">获取验证码</el-button>
                        </div>
                    </el-form-item>
                    <!-- 有图片验证码获取手机验证码 -->
                    <el-form-item label="" prop="phone_sjyzm_tp" v-if="isShow_yzm_1">
                        <div class="flex-hbvc" style="width: 270px">
                            <el-input style="width: 170px" type="text" placeholder="手机验证码" v-model="phone.phone_sjyzm_tp" autocomplete="off" @keyup.enter.native="login_yzm('phone')"></el-input>
                            <el-button class="yzmbutton" :disabled="disabled" @click="getPhoneCaptchas()">获取验证码</el-button>
                        </div>
                    </el-form-item>
                </el-form>
                <van-count-down
                    class="countDown"
                    :style="isShow_1 === true ? 'top: 220px;' : 'top: 286px;'"
                    v-show="isCountDownShow"
                    :time="time"
                    format="ss s后重新发送"
                    @finish="finish"
                ></van-count-down>
                <el-button class="button_btn" style="margin-top: 83px" v-if="isShow_yzm_1" type="primary" @click="login_yzm('phone')">确定</el-button>
                <el-button class="button_btn" :style="isShow_1 === true ? 'margin-top: 142px;' : 'margin-top: 50px;'" v-if="isShow_1" type="primary" @click="login_yzm_1()">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { logins, getCaptchas, captchaImage, getIPs, getPhoneCaptchas, } from '@/api/url'
export default {
  props: {},
  created () { },
  data () {
    return {
      clickActivity: '',//点击活动后登录跳转到充值中心
      phoneNumber: '',//会员的手机号码
      verificationNumberDialogVisible: false, // 异地登录验证手机号码弹窗
      disabled: false, // 是否禁用发送验证码按钮
      isCountDownShow: false, // 默认不显示倒计时
      time: 60 * 1000, // 倒计时的时间
      isShow: false, // 是否显示图片验证码
      isShow_1: 'false', // 是否显示第一次还是第二次获取验证码
      isShow_yzm_1: 'false', // 是否显示第一次还是第二次获取验证码
      account_phonenumber: '', // 异地登录的手机号码
      phone: {
        phone_yzm: '', // 图片验证码
        phone_sjyzm: '', // 手机收取的验证码
        phone_sjyzm_tp: ''// 手机收取的验证码,有图片
      },
      captchaImg: '', // 图片验证码
      uuid: '', // 图片验证码返回的uuid
      rules: {
        phone_yzm: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        phone_sjyzm_tp: [
          { required: true, message: '请输入手机验证码', trigger: 'blur' },
          { min: 6, max: 6, message: '长度应该在6位', trigger: 'blur' }
        ]
      },
    }
  },
  mounted () { },
  methods: {
    // 打开异地登录弹窗
    openRemoyeLogin () {
      this.getIPs().then(() => { this.captchaImages().then(() => { this.verificationNumberDialogVisible = true }) })
    },
    // 获取图片验证码
    async captchaImages () {
      try {
        const res = await captchaImage()
        if (res.data.code === 200) {
          this.captchaImg = 'data:image/gif;base64,' + res.data.img
          this.uuid = res.data.uuid
        } else {
          console.log(res.data.msg)
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 手机号+验证码登录(有图片验证码)
    login_yzm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          try {
            logins({ phoneNumber: this.phoneNumber, code: this.phone.phone_sjyzm_tp }).then((res) => {
              if (res.data.code === 200) {
                // console.log(res)
                this.$store.commit('setUser', res.data)
                window.localStorage.setItem('token', res.data.token)
                this.verificationNumberDialogVisible = false
                this.$message({ message: '登录成功,欢迎回来', type: 'success', center: true })
                this.$EventBus.$emit('callTopGetInfos', 1)//调用首页的gitInfo方法
                this.$EventBus.$emit('openProfileAuths', 1)//查询是否绑定微信和实名认证
              } else {
                this.$message({ message: res.data.msg, type: 'error', center: true })
              }
            })
          } catch (error) {
            console.log(error)
          }
        }
      })
    },
    // 手机号+验证码登录(没图片验证码，直接获取手机验证码)
    login_yzm_1 () {
      if (this.phone.phone_sjyzm !== '') {
        try {
          logins({ phoneNumber: this.phoneNumber, code: this.phone.phone_sjyzm }).then((res) => {
            if (res.data.code === 200) {
              // console.log(res)
              this.$store.commit('setUser', res.data)
              window.localStorage.setItem('token', res.data.token)
              this.verificationNumberDialogVisible = false
              this.$message({ message: '登录成功,欢迎回来', type: 'success', center: true })
              this.$EventBus.$emit('callTopGetInfos', 1)//调用首页的gitInfo方法
              this.$EventBus.$emit('openProfileAuths', 1)//查询是否绑定微信和实名认证
            } else {
              // console.log(res.data.msg)
              this.$message({ message: res.data.msg, type: 'error', center: true })
            }
          })
        } catch (error) {
          console.log(error)
        }
      } else {
        this.$message({ message: '请输入验证码', type: 'error', center: true })
      }
    },
    // 获取手机验证码
    async getPhoneCaptchas () {
      try {
        const res = await getPhoneCaptchas({ phonenumber: this.phoneNumber, code: this.phone.phone_yzm, uuid: this.uuid })
        if (res.data.code === 200) {
          this.$message({ message: res.data.msg, type: 'success', center: true })
          this.isCountDownShow = true// 显示倒计时
          this.disabled = true// 打开禁用发送验证码按钮
        } else {
          this.$message({ message: res.data.msg, type: 'warning', center: true })
          this.captchaImages()
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 倒计时结束时触发
    finish () {
      this.isCountDownShow = false// 隐藏倒计时
      this.disabled = false// 取消禁用发送验证码按钮
    },
    // 获取IP使用情况
    async getIPs () {
      try {
        const res = await getIPs()
        // console.log(res.data.status)
        if (res.data.code === 200 && res.data.status === true) {
          this.isShow = false
          this.isShow_1 = true
          this.isShow_yzm_1 = false
        } else if (res.data.code === 200 && res.data.status === false) {
          this.isShow = true
          this.isShow_yzm_1 = true
          this.isShow_1 = false
        } else {
          console.log(res.data.msg)
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 直接获取手机验证码
    async getCaptchas () {
      try {
        const res = await getCaptchas({ phonenumber: this.phoneNumber })
        if (res.data.code === 200) {
          this.$message({ message: res.data.msg, type: 'success', center: true })
          this.isCountDownShow = true// 显示倒计时
          this.disabled = true// 打开禁用发送验证码按钮
        } else {
          this.$message({ message: res.data.msg, type: 'warning', center: true })
        }
      } catch (err) {
        console.log(err)
      }
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
  },
  computed: {},
  watch: {},
  components: {},
}
</script>

<style scoped lang='less'>
/deep/.el-dialog__header {
    display: block !important;
    border-top: 1.5px solid #b4875c;
    border-left: 1.5px solid #b4875c;
    border-right: 1.5px solid #b4875c;
}
/deep/.el-dialog__body {
    background: url('@/assets/dialogImg/Pop-up_bj.png');
    height: 384px !important;
    border-top: 0px !important;
    border-left: 1.5px solid #b4875c;
    border-right: 1.5px solid #b4875c;
    border-bottom: 1.5px solid #b4875c;
    background-size: cover;
}
.mima {
    font-size: 14px;
    font-family: '微软雅黑';
    font-weight: 500;
    color: #222223;
    letter-spacing: 0.42px;
    margin-bottom: 20px;
}
.anquan {
    font-size: 11px;
    font-family: '微软雅黑';
    font-weight: 400;
    color: #979797 !important;
    letter-spacing: 0.33px;
}
.yzmbutton {
    width: 80px;
    height: 30px;
    background: linear-gradient(180deg, #cdad5f, #f2ead1);
    color: #242322;
    text-align: center;
    line-height: 6px;
    padding: 0;
    border: 0px;
    border-radius: 2px !important ;
    &:hover {
        background: linear-gradient(180deg, #b19248, #d8cfb4);
        color: #242322;
    }

    &:focus {
        color: #242322;
        background: linear-gradient(180deg, #b19248, #d8cfb4);
    }
}
.countDown {
    position: absolute;
    color: #ffb331 !important;
}
/deep/.el-button + .el-button,
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
    margin-left: 0px;
}
</style>
